<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <CommonCard title="今日订单量" :value="orderToday!">
      <template #default>
        <!-- echarts图标区域提供的容器 -->
        <div ref="chartRef" :style="{ width: '100%', height: '100%' }"></div>
      </template>
      <template #bottom>
        <span>昨日订单量</span>
        <span>{{ orderLastDay }}</span>
      </template>
    </CommonCard>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TodayOrders",
});
</script>

<script setup lang="ts">
import CommonCard from "./CommonCard.vue";
import useReportDataStore from "@/stores/reportData";
import { $echarts } from "@/utils/echarts";
import { computed, ref, onMounted, watch } from "vue";
const reportDataStore = useReportDataStore();

const orderToday = computed(() => reportDataStore.reportData?.orderToday);
const orderLastDay = computed(() => reportDataStore.reportData?.orderLastDay);
const orderTrend = computed(() => reportDataStore.reportData?.orderTrend);
const orderTrendAxis = computed(
  () => reportDataStore.reportData?.orderTrendAxis
);

let chart: any = null;

//获取echarts作用的容器
const chartRef = ref();

//echarts的配置
const option = () => {
  return {
    //x轴的配置
    xAxis: {
      type: "category", //类目轴
      boundaryGap: false, //图标两侧是否留下空白
      data: orderTrendAxis.value, //类目轴数据
    },

    //y轴配置(主要配置是什么轴,默认数据轴)
    yAxis: {
      type: "value", //数据轴
      show: false, //是否展示y轴
    },

    //图标的配置
    series: [
      {
        name: "实时订单数", //当前图标折线的名称,
        type: "line", //折线图
        data: orderTrend.value, //当前折线的y轴数据
        smooth: true, //让折线平滑
        areaStyle: {
          //折线的区域样式
          color: "red",
        },
        //折线点的样式
        itemStyle: {
          color: "yellowgreen",
          // opacity: 0,
        },
        lineStyle: {
          color: "green",
          // opacity: 0,
        },
      },
    ],

    //图标距离容器四周的距离
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },

    //鼠标放在图标上的提示
    tooltip: {
      //触发条件
      trigger: "axis", //折线图和柱状图固定书写axis，
      //是否在当前区域展示提示
      confine: true,
    },
  };
};

window.addEventListener("resize", () => {
  chart.resize();
});

//初始化就要开始激活这个容器了
onMounted(() => {
  //$echarts对象上有一个init方法 接受一个容器作为参数,激活echarts图标区域,返回一个容器对象
  chart = $echarts.init(chartRef.value);
  //容器对象上有一个setOption方法,接受这个图标的配置
  chart.setOption(option());
});

watch(orderToday, () => {
  //容器对象上有一个setOption方法,接受这个图标的配置
  chart.setOption(option());
});
</script>

<style scoped></style>
